import { h, isVNode } from 'vue';

const CLabels = {
  name: 'CLabels',
  props: {
    data: undefined,
    gutter: undefined,
    format: Function,
  },
  setup(props, { emit }) {
    let format = typeof props.format === 'function' ? props.format : ({ item }) => item;
    let gap = Number.isFinite(props.gutter) ? props.gutter + 'px' : props.gutter || '8px';
    function renderChildren() {
      if (!Array.isArray(props.data) || !props.data.length) return null;
      return props.data.map((item) => {
        let text = format({ h, item });
        return isVNode(text) ? text : h('span', {}, text);
      });
    }

    return () => {
      return h('div', { style: { display: 'inline-flex', gap, lineHeight: 1.75 } }, renderChildren());
    };
  },
};

export default CLabels;
